<template>
  <el-dialog
    :title="title"
    :model-value="visible"
    :before-close="handleCancelClick"
    append-to-body
    :width="630 + 'px'"
    :close-on-click-modal="true"
  >
    <div class="container" :style="{ height: height + 'px' }">
      <slot name="content"></slot>
    </div>

    <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="handleCancelClick">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick">确定</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
/****************************************************************/
interface MyDialogProps {
  title: string,
  visible: boolean,
  width: number,
  height: number
}

withDefaults(defineProps<MyDialogProps>(), {
  title: '标题',
  visible: false,
  width: 630,
  height: 280
})

const emit = defineEmits(['onClose', 'onConfirm'])

function handleCancelClick() {
  emit('onClose')
}

function handleConfirmClick() {
  emit('onConfirm')
}


</script>


<style scoped lang="scss">
</style>
